<template>
  <CDialog
    class="reduction-dialog"
    title="同步能源数据"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :loading="loading"
    size="small"
  >
    <el-form ref="formRef" :model="formData" label-position="top">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="年月" prop="dateValue">
            <el-date-picker
              class="date-time__picker"
              v-model="formData.dateValue"
              type="month"
              :clearable="false"
              placeholder="请选择"
              value-format="YYYY-MM"
              format="YYYY-MM"
              style="width: 100%"
              :prefix-icon="DateTimeIcon"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'CarbonAssetRegisterDialog'
};
</script>
<script lang="ts" setup>
import {
  defineProps,
  withDefaults,
  defineEmits,
  computed,
  ref,
  reactive,
  watch,
  defineComponent,
  h
} from 'vue';
import { CDialog } from '@/components/CDialog';
import { useMessage } from '@/hooks/useMessage';
import { pullData } from '@/apis/taa/asset/account';
import { GIcon } from '@/components/GIcon/index';

// 时间图标
const DateTimeIcon = defineComponent({
  setup() {
    return () => h(GIcon, { type: 'c-xian-riqi', style: 'font-size: 14px' });
  }
});

interface CreateTargetDialogProps {
  visible: boolean;
}
const props = withDefaults(defineProps<CreateTargetDialogProps>(), {
  visible: false
});
const emit = defineEmits(['update:visible', 'refresh']);

const { createMessage } = useMessage();

const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (!visible) {
      // 关闭时清空数据
      handleClear();
    } else {
      // 打开时初始化新数据
      initVisible();
    }
  }
);

const formRef = ref();
const loading = ref(false);

const formData = reactive({
  dateValue: '',
  dataYear: '',
  dataMonth: ''
});

// 提交按钮
function handleConfirm() {
  if (formData.dateValue) {
    handleSubmit();
  } else {
    createMessage.warning('请先选择年月');
  }
}

// 请求接口
async function handleSubmit() {
  try {
    loading.value = true;
    const params = {
      dataYear: formData.dateValue.split('-')?.[0],
      dataMonth: formData.dateValue.split('-')?.[1]
    };
    await pullData(params);
    createMessage.success('同步能碳数据成功');
    dialogVisible.value = false;
    loading.value = false;
    emit('refresh');
  } catch (error) {
    loading.value = false;
  }
}

// 关闭时清空数据
function handleClear() {
  loading.value = false;
  formRef.value?.resetFields();
}

// 打开时初始化
async function initVisible() {
  handleClear();
}
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.reduction-dialog {
  .el-input {
    .el-input__wrapper {
      padding-right: 10px !important;
    }
  }

  .date-time__picker {
    .el-input__wrapper {
      .el-input__prefix {
        order: 3;
        .el-input__prefix-inner > :last-child {
          margin-right: unset;
        }
      }
    }
  }
}
</style>
